<template>
  <div class="footers">
    <!-- 模块一 -->
    <van-panel title="品牌制造商提供">
      <van-grid :column-num="2">
        <van-grid-item v-for="item in footersData.footer1" :key="item.id" class="grid_items1">
          <van-image lazy-load :src="item.new_pic_url" />
          <h5>{{item.name}}</h5>
          <h6>{{item.floor_price+'元起'}}</h6>
        </van-grid-item>
      </van-grid>
    </van-panel>
    <!-- 模块二 -->
    <van-panel title="周一周五 新品首发">
      <van-grid :column-num="2">
        <van-grid-item v-for="item in footersData.footer2" :key="item.id" class="grid_items2">
          <van-image lazy-load :src="item.list_pic_url" />
          <h5 class="van-ellipsis">{{item.name}}</h5>
          <h6>{{item.retail_price+'元'}}</h6>
        </van-grid-item>
      </van-grid>
    </van-panel>
    <!-- 模块三 -->
    <van-panel title="人气推荐">
      <van-card
        num="2"
        tag="hot"
        :price="item.retail_price+'.00'"
        :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
        origin-price="1000.00"
        v-for="item in footersData.footer3"
        :key="item.id"
      />
    </van-panel>
  </div>
</template>
<script>
export default {
  name: "Footers",
  data() {
    return {};
  },
  methods: {},
  components: {},
  created() {},
  props: ["footersData"]
};
</script>
<style lang="less" scoped>
.van-cell {
  padding-bottom: 0;
}
.van-cell__title {
  text-align: center;
  color: #999;
}

.grid_items1 {
  position: relative;
  h5,
  h6 {
    margin: 0;
    position: absolute;
  }
  h5 {
    top: 15px;
    left: 5px;
    color: saddlebrown;
  }
  h6 {
    top: 30px;
    left: 18px;
    color: salmon;
  }
}
.grid_items2 {
  h5,
  h6 {
    margin: 0;
  }
  h6 {
    color: red;
  }
}
</style>
